
<template>
  <div class="app-container">

    <!-- 搜索筛选 -->
    <el-form :inline="true"  class="user-search">
      <el-form-item label="搜索：">
        <el-input size="small"placeholder="输入文件名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <!--        <el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit()">添加</el-button>-->
      </el-form-item>

      <el-form-item >
        <el-button icon="el-icon-upload" type="success" @click="dialogVisible = true">上传文件</el-button>
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table size="small" :data="listData" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
      <el-table-column align="center" type="selection" width="60">
      </el-table-column>

      <el-table-column prop="imgId" label="Id" >
      </el-table-column>

      <el-table-column label="图片预览" >
        <template slot-scope="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="scope.row.imgLocation"
            :preview-src-list="[scope.row.imgLocation]"
          >
          </el-image>
        </template>
      </el-table-column>

      <el-table-column prop="imgTitle" label="标题">
      </el-table-column>

      <el-table-column prop="imgLocation" label="请求url" >
      </el-table-column>
      <el-table-column label="上传时间">
        <template slot-scope="scope">
          {{scope.row.imgUploadTime| dateFormat }}
        </template>

      </el-table-column>



      <el-table-column prop="imgUploadUser" label="上传用户">
      </el-table-column>


      <el-table-column prop="imgTagId" label="tagId">
      </el-table-column>


      <el-table-column label="img逻辑删除">
        <template slot-scope="scope">
          <span v-if="scope.row.imgDelete == 1" style="color:red"> <i class="el-icon-delete">已被逻辑删除</i> </span>
          <span v-else style="color: #36a3f7">
             未删除
          </span>
        </template>
      </el-table-column>



      <el-table-column  align="center" label="操作" fixed="right">
        <template slot-scope="scope" width="100px">
          <!--          <el-button size="mini" icon="el-icon-edit" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>-->
          <span v-if="scope.row.imgDelete == 0">
            <el-button size="mini" icon="el-icon-delete" type="warning" @click="deleteImg(scope.$index, scope.row)">逻辑删除</el-button>
          </span>
          <span v-else>
            <el-button size="mini" icon="el-icon-warning" type="info" @click="deleteImg(scope.$index, scope.row)">撤销删除</el-button>
          </span>

          <el-button size="mini" style="margin-left: 0"  icon="el-icon-download" type="primary" @click="download(scope.$index, scope.row)">下载文件</el-button>
          <el-button size="mini" style="margin-left: 0" icon="el-icon-delete" type="danger" @click="deleteForever(scope.$index, scope.row)">彻底删除</el-button>

        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <!--    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>-->
    <!-- 编辑界面 -->
    <el-dialog
      title="upload"
      :visible.sync="dialogVisible"
      :before-close="handleClose" center>


      <upload-img ref="uploadComponent" @refresh-me="getImgList" @close-me="close"></upload-img>

    </el-dialog>

  </div>
</template>

<script>
import uploadImg from "@/views/file/uploadImg";
import {imgDelete, imgDeleteAccu, imgDeleteCancel, imgGet, imgGetWithDelete} from "@/api/img";

export default {
  name: 'imgList',
  data() {
    return {
      dialogVisible: false,
      nshow: true, //switch开启
      fshow: false, //switch关闭
      loading: false, //是显示加载
      editFormVisible: false, //控制编辑页面显示与隐藏
      title: '添加图片',
      listData: [],
      editForm: {
        //表单内容
        imgId: "",
        imgTitle: '',
        imgLocation: "",
        imgUploadTime: '',
        imgUploadUser: '',
        imgDelete: '',
        imgTagId: '',
        token: localStorage.getItem('logintoken')
      },
      rules: {
        // deptName: [
        //   { required: true, message: '请输入blog名称', trigger: 'blur' }
        // ],
        // deptNo: [{ required: true, message: '请输入blog代码', trigger: 'blur' }]
      }
    }
  },
  // 注册组件
  components: {
    uploadImg,
  },
  /**
   * 数据发生改变
   */

  /**
   * 创建完毕
   */
  created() {
    this.getImgList()
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    close(){
      //关闭文件上传框
      this.dialogVisible = false
    },
    handleFileSuccess(res,file){

    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    getImgList(){
      console.log("获取img列表")
      imgGetWithDelete().then(res => {
          this.listData = res.data
        }
      ).catch(err => {
          console.error(err);
        }
      )
    },
    // 搜索事件
    search() {
      this.getdata()
    },
    // 删除img
    deleteImg(index, row) {

      if (row.imgDelete ===0){
        //还没逻辑删除
        this.$confirm('确定要逻辑删除吗?', '信息', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            imgDelete(row.imgId)
              .then(res => {
                if (res.code===0) {
                  this.$message({
                    type: 'success',
                    message: '已删除!'
                  })
                } else {
                  this.$message({
                    type: 'info',
                    message: res.msg
                  })
                }
                this.getImgList()
              })
              .catch(err => {
                this.loading = false
                this.$message.error('删除失败，请稍后再试！error:'+err)
              })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      }else {
        //还没逻辑删除
        this.$confirm('确定要撤销逻辑删除吗?', '信息', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            imgDeleteCancel(row.imgId)
              .then(res => {
                if (res.code===0) {
                  this.$message({
                    type: 'success',
                    message: '已成功撤销删除!'
                  })
                } else {
                  this.$message({
                    type: 'info',
                    message: res.msg
                  })
                }
                this.getImgList()
              })
              .catch(err => {
                this.loading = false
                this.$message.error('撤销删除失败，请稍后再试！error:'+err)
              })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      }

    },
    download(index, row){
      //下载请求
      window.open(row.imgLocation);
    },
    deleteForever(index, row) {
      /*彻底删除服务器该文件*/
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        imgDeleteAccu(row.imgId).then(
          res =>{
            if (res.code===0){
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            }else {
              this.$message({
                type: 'error',
                message: res.msg
              });
            }
            this.getImgList();
          }
        );

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  }
}
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
.editor-after-div >>>.el-upload{
  widtH:56px;
  height: 56px;
  text-align: center;
  line-height: 56px;
}

.editor-after-div >>>.el-upload-list__item-thumbnail{
  width: 56px;
  height: 56px;
}
.editor-after-div >>>.el-upload-list__item{
  width: 56px;
  height: 56px;
}

</style>


